<template>
  <div class="content">
    <div class="filter-wrapper">
      <el-input type="text" v-model="filterText" size="small" placeholder="输入关键字进行过滤" />
    </div>
    <vue-okr-tree
      ref="tree"
      :data="testData"
      :current-lable-class-name="renderCurrentClass"
      :filter-node-method="filterNode"
      :render-content="renderContent"
      show-collapsable
      default-expand-all
    ></vue-okr-tree>
  </div>
</template>
<script>
import { VueOkrTree } from 'vue-okr-tree'
import 'vue-okr-tree/dist/vue-okr-tree.css'
import axios from 'axios'
export default {
  components: {
    VueOkrTree
  },
  data () {
    return {
      filterText: '',
      testData: []
    }
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    generateTree (list, parentId, { idName = '员工ID', parentIdName = '上级ID', childName = 'children' } = {}) {
      if (!Array.isArray(list)) {
        return list
      }
      return list.reduce((pre, cur) => {
        // 找到parentId的子节点之后,递归找子节点的下一层级节点
        if (cur[parentIdName] === parentId) {
          const children = this.generateTree(list, cur[idName])
          if (children.length) {
            cur[childName] = children
          }
          return [...pre, cur]
        }
        return pre
      }, [])
    },
    getData () {
      axios.get('http://localhost:3000').then(res => {
        this.testData = this.generateTree(res.data, 'jinyi5')
      })
    },
    filterNode (value, data) {
      if (!value) return true
      return data['真实姓名'].indexOf(value) !== -1
    },
    renderCurrentClass (node) {
      return 'label-bg-blue'
    },
    renderContent (h, node) {
      console.log(node)
      const cls = ['diy-wrapper']
      if (node.isCurrent) {
        cls.push('current-select')
      }
      if (node.isLeftChild) {
        cls.push('left-child')
      }
      return (
        <div class={cls}>
          <div class="diy-con-content">层级:{node.level}</div>
          <div class="diy-con-content">子总数:{node.childNodes.length}</div>
          <div class="diy-con-content">员工ID: {node.data['员工ID']}</div>
          <div class="diy-con-content">真实姓名: {node.data['真实姓名']}</div>
          <div class="diy-con-content">身份证号: {node.data['身份证号']}</div>
        </div>
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  padding: 10px;
}
.org-chart-container{
  display: flex;
  justify-content: center;
}
.filter-wrapper {
  margin-bottom: 10px;
}
::v-deep .label-bg-blue{
  background: #1989fa;
  color: #fff;
}
::v-deep .diy-con-content {
  font-size: 12px;
}
</style>
